
<template>
  <div class="home">
    <!--顶部提示框 -->
    <van-notice-bar
      left-icon="setting-o"
      background="#B20D07"
      color="#ffffff"
      scrollable
      mode="closeable"
    >京东618，抢618元大红包 顺带说一句 刚哥真帅!!!</van-notice-bar>
    <!--  搜索框 -->

    <van-search shape="round" background="#B20D07 " :placeholder="tips" disabled show-action>
      <template #action>
        <router-link to="/login" class="login">登录</router-link>
      </template>
      <template #left>
        <van-icon name="home-o" />
      </template>
    </van-search>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swiperArr" :key="item.id">
        <van-image
          fit='contain'
          :src="item.src"
        >
        </van-image>
      </van-swipe-item>
    </van-swipe>
    <!-- 分割线 -->
    <van-divider>
      <span>为你推荐</span>
    </van-divider>

    <!-- 下拉刷新 -->

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
        offset="50"
      >
        <!-- v-for循环一个数字时，是从1开始 -->
        <div v-for="item in len" :key="item">
          <Good :good="list[2*(item-1)]"></Good>
          <Good :good="list[2*(item-1)+1]"></Good>
        </div>
      </van-list>
    </van-pull-refresh>

    <TabBar></TabBar>
  </div>
</template>

<script>
import {
  NoticeBar,
  Search,
  Icon,
  Divider,
  List,
  PullRefresh,
  Cell,
  Swipe,
  SwipeItem,
  Image,
  Toast
} from "vant";
export default {
  name: "home",
  components: {
    TabBar: () => import("../components/common/TabBar.vue"),
    Good: () => import("../components/common/Good.vue"),
    [NoticeBar.name]: NoticeBar,
    [Search.name]: Search,
    [Icon.name]: Icon,
    [Divider.name]: Divider,
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    [Cell.name]: Cell,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Image.name]: Image
  },
  data: function() {
    return {
      refreshing: false,
      list: [],
      page: 1,
      finished: false,
      loading: false,
      swiperArr:[
        {
          id:1,
          src:'//m.360buyimg.com/mobilecms/s700x280_jfs/t1/120069/23/3943/100429/5ed706a6E46b65a74/11457cbd655fff67.jpg!cr_1125x445_0_171!q70.jpg.dpg'
        }, {
          id:2,
          src:'//m.360buyimg.com/mobilecms/s700x280_jfs/t1/120069/23/3943/100429/5ed706a6E46b65a74/11457cbd655fff67.jpg!cr_1125x445_0_171!q70.jpg.dpg'
        }, {
          id:3,
          src:'//m.360buyimg.com/mobilecms/s700x280_jfs/t1/120069/23/3943/100429/5ed706a6E46b65a74/11457cbd655fff67.jpg!cr_1125x445_0_171!q70.jpg.dpg'
        }
      ]

    };
  },
  computed: {
    tips: function() {
      var arr = ["九阳热水壶", "Mac Pro", "笔记本电脑"];
      return arr[Math.floor(Math.random() * 3)];
    },
    len: function() {
      return Math.floor(this.list.length / 2);
    }
  },
  mounted() {
    this.getList();
    //获取广告数据
    this.$http.getAds({}).then(()=>{
      console.log('进入这里了')
    })
  },
  methods: {
    onLoad() {
      this.loading = true;
      this.page++;
      this.getList();
    },
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.page = 1;
        this.getList();
        this.refreshing = false;
      }, 500);
    },
    //获取端口数据
    getList() {
      let parmas = {
        hot: false,
        page: this.page
      };
      // console.log(parmas);

      this.$http.getGoodList(parmas).then(res => {
        console.log("这是获取到的商品", res);
        if (res.length < 4) {
          Toast("没有更多了");
          return
        }else{
          this.list = [...this.list,...res]
           this.finished = false;
        this.refreshing = false;
        this.loading = false;
        }
       
      });
    }
  }
};
</script>
<style lang="scss">
.home {
  .van-search {
    background: #b20d07;
  }
  .van-divider {
    color: #1989fa;
  }
  .van-icon {
    font-size: 0.6rem;
  }
  .van-pull-refresh .van-cell {
    display: inline-block;
    width: 5rem;
    height: 5rem;
    border: 1px solid aqua;
    box-sizing: border-box;
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .van-image {
    display: block;
    width: 100%;
    height: 100%;
  }
  .login {
    color: white;
  }
}
</style>